<template>
  <transition-group
    name="hinge"
    tag="ul"
    class="search-list"
    v-show="searches.length"
    :class="{'ulrow':showRow}"
  >
    <li v-for="item in searches" :key="item.id" @click="selectItem(item)" :class="{'row':showRow}">
      {{item.name}}
      <i class="iconfont icondel" @click.stop="deleteTag(item)"></i>
    </li>
  </transition-group>
</template>

<script>
export default {
  props: {
    // 以列表形式展现：
    showRow: {
      type: Boolean,
      default: false
    },
    searches: {
      type: Array,
      default: []
    }
  },
  methods: {
    selectItem(item) {
      this.$emit("select", item);
    },
    deleteTag(item) {
      this.$emit("delete", item);
    }
  }
};
</script>

<style lang="less" scoped>
.search-list {
  .flex-row-wrap(center);
  margin-top: 15px;
  li {
    padding: 5px 0px 5px 10px;
    margin: 0 5px 10px 0px;
    border-radius: 15px;
    background: #333;
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.3);
    color: #f9f9f9;
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    position: relative;
    z-index: 6;
    .icondel {
      .extend-click;
      color: #fff;
      border-radius: 50%;
      // position: absolute;
      // right: -7px;
      // top: -6px;

      // background-color: #666;
      border-radius: 50%;
      padding: 1px;
      margin-right: 7px;
      margin-left: 7px;
    }
    &.row {
      width: 100%;
      background-color: transparent;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 16px;
      margin-bottom: 24px !important;
      border-radius: 0;
      padding-right: 30px !important;
      line-height: 1.4;
      overflow: hidden !important;
      i {
        position: absolute;
        right: 0;
        top: -6px;
        font-size: 24px;
        margin: 0;
      }
    }
  }
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    z-index: 66;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    z-index: 66;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
    z-index: 66;
  }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
    z-index: 66;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    z-index: 66;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    z-index: 66;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
    z-index: 66;
  }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
    z-index: 66;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
.hinge-leave-active {
  -webkit-animation-duration: 1.666s;
  animation-duration: 1.666s;
}

.hinge-leave-to {
  z-index: 66;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
.hinge-move {
  transition: transform 1s;
}
.ulrow {
  .hinge {
    -webkit-animation-name: none !important;
    animation-name: none !important;
  }
  .hinge-leave-active {
    animation-duration: 0s !important;
    // transition: all 0.2s !important;
  }

  .hinge-leave-to {
    z-index: 66 !important;
    -webkit-animation-name: none !important;
    animation-name: none !important;
    height: 0 !important;
  }
  .hinge-move {
    transition: none !important;
  }
  li.row {
    &.hinge-enter-active,
    &.hinge-leave-active {
      transition: all 0.1s;
    }
    &.hinge-enter,
    &.hinge-leave-to {
      height: 0px;
    }
  }
}
</style>